<template>
    <div>
        <h2 class="title">设备列表详细状态</h2>
        <a-table
            bordered
            :data-source="tableData"
            :columns="columns"
            :row-class-name="tableRowClassName"
            :pagination="false"
            :row-key="(record, index) => record.clientId || record.productId || index"
        />
    </div>
</template>

<style>
.ant-table-tbody > tr.warning-row > td {
    background: oldlace !important;
}
.ant-table-tbody > tr.success-row > td {
    background: #f0f9eb !important;
}
</style>

<script>
export default {
    name: 'DeviceList',
    data() {
        return {
            tableData: [],
            columns: [
                {
                    title: '序号',
                    dataIndex: 'index',
                    key: 'index',
                    width: 60,
                    customRender: (text, record, index) => index + 1
                },
                {
                    title: '名称',
                    dataIndex: 'name',
                    key: 'name',
                    width: 180
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    width: 80
                },
                {
                    title: '启用',
                    dataIndex: 'enabled',
                    key: 'enabled',
                    width: 80
                },
                {
                    title: '客户ID',
                    dataIndex: 'clientId',
                    key: 'clientId',
                    width: 180
                },
                {
                    title: '设备ID',
                    dataIndex: 'productId',
                    key: 'productId',
                    width: 180
                },
                {
                    title: '创建时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                    width: 180
                }
            ]
        }
    },
    methods: {
        tableRowClassName(record, index) {
            let style = ''
            let item = this.tableData[index]
            if (item) {
                switch (item.status) {
                    case '离线':
                        style = 'warning-row'
                        break
                    case '在线':
                        style = 'success-row'
                        break
                    case '未激活':
                        style = ''
                        break                    
                    default:
                        break
                }
            }
            return style
        },
        tableUpdate() {
            let status = ''
            for (let i = 0; i < this.tableData.length; i++) {
                let item = this.tableData[i]

                switch (item.status) {
                    case 1:
                        status = '离线'
                        break
                    case 2:
                        status = '在线'
                        break
                    case 3:
                        status = '未激活'
                        break                    
                    default:
                        break
                }
                this.tableData[i].status = status
            }
        },
        updateDeviceList(data) {
            this.tableData = data
            this.tableUpdate(data)
        }
    }
}
</script>

<style scoped lang="scss">
.title {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}
</style>